<!-- 
  @name: 添加储值卡
  @date: 2020.3.31
 -->
<template>
	<view class="content">
		<view class="info">
			<view class="item bl u-f-jsb">
				<view>储值卡号</view>
				<view class="input-box u-f-ac">
					<input class="int" placeholder="请输入8位数卡号" maxlength="8" placeholder-class="phcolor" v-model.trim="cardNo" />
					<image  src="../static/my/scan.png" mode="aspectFill" @tap="scan"></image>
				</view>
			</view>
			<view class="item bl">
				<view>设置密码</view>
				<input type="number" class="int" maxlength="6" placeholder="请输入6位纯数字" placeholder-class="phcolor" v-model.trim="cardPwd" />
			</view>
			<view class="item bl">
				<view>备注</view>
				<input class="int" placeholder="添加备注" placeholder-class="phcolor" v-model.trim="cardDesc" />
			</view>
			<view class="card-types">
				<view class="item">卡类型</view>
				<view class="types u-f-jsb">
					<view :class="{active:cardType===0}" @tap="cardType=0">共享余额</view>
					<view :class="{active:cardType===1}" @tap="cardType=1">分配余额</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="info">
			<view class="item">
				<view>设置额度</view>
				<input type="digit" class="int" :placeholder="'当前可分配余额' + dtBalance + '元'" placeholder-class="phcolor" v-model.trim="cardMoney" />
			</view>
		</view> -->
		
		<button class="btn_submit" @tap="submit">确定</button>
		
		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				operaId: '',  //运营商id
				cardNo: '',
				cardPwd: '',
				cardDesc: '',
				cardMoney: '',
				cardType: 0,
			}
		},
		computed: {
			dtBalance() {
				return this.$store.state.dtBalance;
			}
		},
		onLoad(e) {
			this.operaId = e.operaId;
		},
		methods: {
			//提交
			submit() {
				if(this.cardNo.length < 8) {
					this.$showToast('请输入8位数卡号！');
					return;
				}
				if(!this.cardPwd) {
					this.$showToast('请输入卡密码！');
					return;
				} else {
					let str = parseInt(this.cardPwd).toString();
					if(str.length !== 6) {
						this.$showToast('请输入6位纯数字密码！');
						return;
					}
				}
				
				if(!this.cardDesc) {
					this.$showToast('请输入备注！');
					return;
				}
				
				// if(!this.cardMoney) {
				// 	this.$showToast('请输入卡额度！');
				// 	return;
				// } else {
				// 	if(parseFloat(this.cardMoney) > this.dtBalance) {
				// 		this.$showToast('可用余额不足！');
				// 		return;
				// 	}
				// }
				
				this.submit2();
			},
			submit2() {
				this.$http({
					url: this.$api.recordUrl + 'addfillusercard',
					data: {
						// operaId: this.operaId,
						cardNo: this.cardNo,
						cardPwd: this.cardPwd,
						cardDesc: this.cardDesc,
						cardType: this.cardType,
					}
				}).then(res => {
					this.$successToast('添加成功！');
					this.$store.commit('setDtBalance', this.$operation(this.dtBalance, '-', this.cardMoney));
					setTimeout(() => {
						uni.$emit('userAcc_cardAdd', {});
					}, this.$tmp.TIME_SUC);
					this.$sucBack();
				});
			},
			scan() {
				uni.scanCode({
				    success:  (res) => {
				        console.log('条码内容：' + res.result);
						this.cardNo = res.result;
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.info {
		width: 750rpx;
		padding: 0 30rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
	}
	.item {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.int {
			flex: 1;
			text-align: end;
			margin-left: 30rpx;
		}
	}
	.item.bl {
		border-bottom: 1rpx solid $color-list;
	}
	.btn_submit {
		margin-top: 250rpx;
	}
	
	.input-box {
		image {
			width: 44rpx;
			height: 44rpx;
			flex-shrink: 0;
			margin-left: 32rpx;
		}
	}
	
	.types {
		padding-bottom: 30rpx;
		margin: 0 20rpx;
		&>view {
			width: 304rpx;
			text-align: center;
			border-radius: 34rpx;
			color: #333333;
			background-color: #eeeeee;
			line-height: 70rpx;
			box-sizing: border-box;
			
			&.active {
				background-color: #0DC887;
				color: #FFFFFF;
			}
		}
	}
</style>
